import React, { Component } from 'react';
import {
	StyleSheet, Modal, View,
	Image, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../config/global';
import { Keyboard } from "react-native";

const scale = GLOBAL.SCALE;
export class PageModal extends Component {
	constructor(props) {
		super(props);
	}

	componentWillReceiveProps (props) {
		let { isVisible } = props;
		if (isVisible) {
			Keyboard.dismiss();
		}
	}

	render () {
		let { isVisible, demoData, modelClick, animationType, closeCallballFn } = this.props;
		return (
			<Modal animationType={animationType || 'none'} transparent={true} visible={isVisible} onRequestClose={() => { console.log(1) }}>
				<View style={{ width: '100%', height: '100%' }} onPress={() => { modelClick && modelClick() }} >
					<View style={styles.modalBox}>
						{demoData}
						{
							closeCallballFn ? (
								<TouchableOpacity onPress={() => { closeCallballFn && closeCallballFn(); }} style={{ paddingTop: 20 * scale }}>
									<Image source={require('../../imgs/store/modadlClose.png')} />
								</TouchableOpacity>
							) : null
						}
					</View>
				</View>
			</Modal>
		)
	}
}

const styles = StyleSheet.create({
	modalBox: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'rgba(0, 0, 0, 0.5)'
	}
})